import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { getCatgrayGoods, getCatgray } from '@/service';
import type { AppStateType } from '@/models/app';
import { CatgrayStyle } from './style';
import { Row, Col } from 'antd';
import GoodsList from './GoodsList';
import { notification } from 'antd';

type CatgrayProps = {
  config: AppStateType;
};

const Catgray: React.FC<CatgrayProps> = (props) => {
  const [catgray, setCatgray] = useState([] as any[]);
  const [selectIndex, setSelectIndex] = useState(0);

  const [catgrayGoodsList, setCatgrayGoodsList] = useState([] as any[]);

  const { uniacid, store_id, cashier_id } = props.config;
  const activeStyle: React.CSSProperties = {
    color: '#FA541C',
    fontWeight: 'bold',
    borderLeft: 'solid 2px #fa541c',
  };

  useEffect(() => {
    getCatgray({
      uniacid,
      store_id,
      cashier_id,
    }).then((res) => {
      let item = res[0];
      getCatgrayGoods({
        uniacid,
        store_id,
        cashier_id,
        category: item?.id,
        rows: 16,
        page: 1,
        isFissionScale: false,
        a: 0,
      }).then((res) => {
        if (res.msg) {
          setCatgrayGoodsList(res.msg);
        } else {
          console.log('缺少参数');
        }
      });
      setCatgray(res);
    });

    return () => {};
  }, [props.config]);

  return (
    <>
      {catgray.length > 0 && (
        <Row>
          <Col span={5}>
            <CatgrayStyle>
              {catgray.map((item, index) => {
                return (
                  <div
                    className="box"
                    key={index + item.id}
                    onClick={() => {
                      selectCatgray(index, item);
                    }}
                  >
                    <div
                      className="container"
                      style={selectIndex === index ? activeStyle : undefined}
                    >
                      {item.name}
                    </div>
                  </div>
                );
              })}
            </CatgrayStyle>
          </Col>
          <Col span={19}>
            {catgrayGoodsList?.length > 0 && (
              <GoodsList
                catgrayGoodsList={catgrayGoodsList}
                catgrayName={catgray[selectIndex].name}
              />
            )}
          </Col>
        </Row>
      )}
    </>
  );

  function selectCatgray(index: number, item: any) {
    setSelectIndex(index);
    getCatgrayGoods({
      uniacid,
      store_id,
      cashier_id,
      category: item.id,
      rows: 16,
      page: 1,
      isFissionScale: false,
      a: 0,
    }).then((res) => {
      if (res.msg) {
        setCatgrayGoodsList(res.msg);
      } else {
        notification.info({
          message: '缺少参数',
        });
      }
    });
  }
};

export default connect(
  ({
    app,
    loading,
  }: {
    app: AppStateType;
    loading: {
      effects: Record<string, boolean>;
    };
  }) => {
    return {
      config: app,
      loading,
    };
  },
)(Catgray);
